<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'

interface Props {
  item: {
    id: number
    content: string
    timestamp: number
    favorite: boolean
  }
}

const props = defineProps<Props>()
const emit = defineEmits(['close', 'save'])

const content = ref(props.item.content)
const favorite = ref(props.item.favorite)
const textareaRef = ref<HTMLTextAreaElement | null>(null)

const handleSave = () => {
  emit('save', {
    id: props.item.id,
    content: content.value,
    favorite: favorite.value
  })
  emit('close')
}

// 处理键盘事件
const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Escape') {
    e.stopPropagation()  // 阻止事件冒泡
    emit('close')
  } else if (e.key === 'Tab') {
    handleTab(e)
  }
}

onMounted(() => {
  if (textareaRef.value) {
    textareaRef.value.focus()
    textareaRef.value.setSelectionRange(0, textareaRef.value.value.length)
  }
})

// 处理tab键
const handleTab = (e: KeyboardEvent) => {
  e.preventDefault()
  const target = e.target as HTMLTextAreaElement
  const start = target.selectionStart
  const end = target.selectionEnd
  content.value = content.value.substring(0, start) + '    ' + content.value.substring(end)
  nextTick(() => {
    target.selectionStart = target.selectionEnd = start + 4
  })
}
</script>

<template>
  <div 
    class="clipboard-editor fixed inset-0 bg-black/20 z-50 flex items-center justify-center p-4" 
    @click.self="emit('close')"
    @keydown="handleKeydown"
  >
    <div class="bg-base-100 rounded-lg shadow-lg w-[80%] h-[60%] flex flex-col">
      <!-- 编辑区域 -->
      <div class="flex-1 p-3 overflow-hidden">
        <div class="h-full bg-base-200 rounded-lg">
          <textarea
            ref="textareaRef"
            v-model="content"
            class="w-full h-full p-3 text-sm font-mono overflow-y-auto"
            placeholder="在此编辑内容..."
            spellcheck="false"
          ></textarea>
        </div>
      </div>

      <!-- 底部工具栏 -->
      <div class="px-3 pb-3 flex items-center justify-between border-t border-base-200">
        <button 
          class="btn btn-ghost btn-sm btn-square tooltip tooltip-right"
          data-tip="收藏"
          @click="favorite = !favorite"
        >
          <i class="ri-star-fill" :class="{ 'text-yellow-400': favorite }"></i>
        </button>

        <div class="flex gap-2">
          <button 
            class="btn btn-ghost btn-sm px-3"
            @click="emit('close')"
          >
            取消
          </button>
          <button 
            class="btn btn-primary btn-sm px-3"
            @click="handleSave"
            :disabled="!content.trim()"
          >
            保存
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
textarea {
  @apply bg-transparent border-none focus:outline-none resize-none;
  tab-size: 4;
  line-height: 1.5;
}

textarea::-webkit-scrollbar {
  width: 4px;
}

textarea::-webkit-scrollbar-track {
  @apply bg-transparent;
}

textarea::-webkit-scrollbar-thumb {
  @apply bg-base-300 rounded-full hover:bg-base-content/20 transition-colors;
}

.tooltip::before {
  @apply text-xs;
}
</style> 